<script lang="ts" setup>
import {reactive, ref,onMounted} from 'vue'
import {Crop, Management, User, UserFilled} from "@element-plus/icons-vue";
import { ElMessageBox } from 'element-plus';
import router from '@/router/index.js'
const userinfoData = ref({
  phonenumber:'',
  realname:'',
  address:'',
  accountbalance:'',
  userstatus:'',
  email:'',

})
onMounted(() => {
    //console.log('mounted')
    if(+router.currentRoute.value.query.adon===1)
      ElMessageBox.alert('<a href="https://gitee.com/D15771195036/upms/" target="_blank"><img src="https://upms-ganfan.oss-cn-beijing.aliyuncs.com/2bbf14e7-6389-4dcc-9707-24ec53d3ca88.webp" alt="图片违规" style="width:400px; height:auto"/></a>','Commercial',
        {
          dangerouslyUseHTMLString: true,
          showClose:false,
          showConfirmButton:true,
          confirmButtonText: '已了解详情',
          beforeClose(action, instance, done) {
            if(action==='confirm'){
              instance.confirmButtonLoading = true
              setTimeout(() => {
                done()
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                }, 300)
              }, 3000)
            } 

              router.replace({path:'',query:{adon:0}})
              setTimeout(()=>{router.go(0)},1000)
              
          },

        }
      )

  })

import {userInfoService} from "@/api/user";
const userinfo=async ()=>{
  let result=await userInfoService();
  userinfoData.value=result.data;
}
userinfo();
import useUserInfoStore from '@/stores/userInfo.js';
const userInfoStore = useUserInfoStore();
const imgUrl= ref(userInfoStore.userInfo.avatar)
</script>

<template>
  <el-container class=main-container>
<!--    左边展示个人信息-->
    <el-aside width="30%">
      <el-card>
        <template #header>
          <div><strong>基本信息</strong></div>
        </template>
        <img v-if="imgUrl" :src="imgUrl" class="avatar" width="278" />
        <img v-else :src="avatar" width="278" />
        <el-form :model='userinfoData' >
          <el-form-item label="手机号:">
            <span>{{ userinfoData.phonenumber }}</span>
          </el-form-item>
          <el-form-item label="地址:">
            <span>{{ userinfoData.address }}</span>
          </el-form-item>
          <el-form-item label="真实姓名:">
            <span>{{ userinfoData.realname }}</span>
          </el-form-item>
          <el-form-item label="邮箱:">
            <span>{{ userinfoData.email }}</span>
          </el-form-item>
          <el-form-item label="余额:">
            <span>{{ userinfoData.accountbalance }}</span>
          </el-form-item>
          <el-form-item v-if="userinfoData.userstatus === 0" label="用户类型">
            <span>正常</span>
          </el-form-item>

          <el-form-item v-if="userinfoData.userstatus === 1" label="用户类型">
            <span>欠费</span>
          </el-form-item>
        </el-form>
      </el-card>

    </el-aside>
    <!--  中间的-->
    <el-container>
      <el-aside width="500px">
        <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
                 router>
          <el-menu-item index="/user/info/update">
            <el-icon>
              <User />
            </el-icon>
            <span>修改账号信息</span>
          </el-menu-item >
          <el-menu-item index="/user/avatarupdate">
            <el-icon>
              <User />
            </el-icon>
            <span>修改头像</span>
          </el-menu-item>
          <el-menu-item index="/user/resetpassword" >
            <el-icon>
              <Crop />
            </el-icon>
            <span>修改密码</span>
          </el-menu-item>
        </el-menu>

      </el-aside>
      <!--    右边的内容-->
      <el-aside >
        <router-view></router-view>
      </el-aside>
    </el-container>


  </el-container>
</template>

<style scoped lang="scss">

.main-container {
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.el-container {
  flex: 1;
  display: flex;
  justify-content: flex-start; /* 水平方向从起始位置排列 */
  //align-items: flex-start; /* 垂直方向从顶部开始对齐 */
  flex-direction: row; /* 子元素水平排列 */
  padding: 0;
}

.el-aside {
  border-radius: 15px; /* 添加圆角 */
  //overflow: auto;
  overflow: hidden;
}

.el-card {
  width: 100%;
  border-radius: 15px; /* 添加圆角，大小可以根据需要调整 */
  overflow: hidden; /* 确保内容不会溢出圆角边框 */
}

.avatar {
  width: 278px;

}

.el-main {
  flex-grow: 1; /* 确保el-main填充剩余空间 */
  //overflow: auto; /* 添加滚动条 */
}

/* 左侧样式 */
.el-aside:first-child {
  width: 40%; /* 左侧固定宽度或使用具体数值 */
}

/* 中间样式 */
.el-container > .el-aside:nth-child(2) {
  width: 300px; /* 调整中间栏的宽度，可以设置为更小的值 */
  min-width: 300px; /* 确保中间栏不会过窄 */
  flex-shrink: 0; /* 避免在布局中被压缩 */
}

/* 右侧样式 */
.el-container > .el-aside:last-child {
  flex-grow: 1; /* 右侧内容占据剩余空间 */
}

/* 调整el-form-item的宽度，使其占据更多空间 */
.el-form-item {
  width: 100%; /* 使表单项占满其父元素 */
}

/* 调整el-input的宽度，使其更长 */
.el-input__inner {
  width: 100%; /* 输入框占满其父元素 */
}

/* 给菜单项添加细线 */
.el-menu-item {
  border-bottom: 1px solid #e6e6e6; /* 默认颜色较浅的细线 */
}

/* 为除了最后一个菜单项之外的每个菜单项添加更深颜色的细线 */
.el-menu-item:not(:last-child) {
  border-bottom: 1px solid #333; /* 颜色更深的细线 */
}

</style>
